<template>
  <div>
    <div style="padding-top: 50px;padding-bottom: 90px;text-align:center;">
      <div style="padding-top: 50px;padding-bottom: 90px;text-align:center;">
        <l_banner :c_banner="banner_arr2"></l_banner>
    </div>
      <div style="padding:20px 40px;" class="center ">
        <div >
          <div class="big" style="overflow:hidden;border-top:1px solid rgba(224,224,224,1);padding-top:8px;" >
          <div
            style="float:left;max-width: 23%;min-height:349px;overflow:hidden;padding:25px 10px;"
            v-for="i in l_event" class="border2 border4"
          >
            <div
              style="display:block;"
            >
              <a href="" style="display:block;" :title="i.h4">
                <div>
                  <img style="height:186px;" :src="i.img" alt="" />
                </div>
                <h4
                  style="color: #222222;
        font-size: 18px;
        line-height: 24px;margin-bottom: 5px;padding-top: 22px;"
                >
                  {{i.h4}}
                </h4>
              </a>
              <p
                style="color: #000000;
        font-size: 13px;
        font-family: 微軟正黑體;
        line-height: 26px;
        padding-top: 10px;"
              >
               {{i.p}}
              </p>
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import l_banner from './assets/l_banner'
import l_event from './assets/l_event'
export default {
   data(){
    return{

      banner_arr2:[
        {title:'EVENT',para:'被穿著在WorldTour赛事中贏得勝利，Aero系列包含有我們最速和最先進科技化的競赛車服。歷經多年研發只為助您縮短比赛秒數。'}
      ],
       l_event:[
        {
          img:
            "https://ccdn.goodq.top/caches/c6f1037431be2e57c07dd414fe5102a6/aHR0cDovLzVjZjY1M2M1MDVmZTEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNi9kOGMxZTBkMjBlM2QyOGMxODM5MzUwOTI0NGYzNmNkNC01MDB4MzUwLTkwLndlYnA_p_p100_p_3D.webp",
          h4: "2018环青海湖-蓄势待发",
          p:
            "当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和..."
        },
        {
          img:
            "https://ccdn.goodq.top/caches/c6f1037431be2e57c07dd414fe5102a6/aHR0cDovLzVjZjY1M2M1MDVmZTEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNi81YzQ2NWM5YWQ1YTNhODc3MTcwODA5MDMxNWYxZWY1OC01MDB4MzUwLTkwLndlYnA_p_p100_p_3D.webp",
          h4: "第一届公路自行车友谊赛",
          p:
            "当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和..."
        },
        {
          img:
            "https://ccdn.goodq.top/caches/c6f1037431be2e57c07dd414fe5102a6/aHR0cDovLzVjZjY1M2M1MDVmZTEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNi9jNWM2MTEwOGJlMDBmMmUzNjY0MDFiZWY3ODk3OGUwYi01MDB4MzUwLTkwLndlYnA_p_p100_p_3D.webp",
          h4: "“爱在中国 · 为爱骑行”",
          p:
            "当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和..."
        },
        {
          img:
            "https://ccdn.goodq.top/caches/c6f1037431be2e57c07dd414fe5102a6/aHR0cDovLzVjZjY1M2M1MDVmZTEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNi9iNzlmZGUxODY3ZTdmMGZiNDg0ODlmNTg1ZDY4YjEyYy01MDB4MzUwLTkwLndlYnA_p_p100_p_3D.webp",
          h4: "环鄱阳湖国际自行车大赛",
          p:
            "当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和..."
        },

         {
          img:
            "https://ccdn.goodq.top/caches/c6f1037431be2e57c07dd414fe5102a6/aHR0cDovLzVjZjY1M2M1MDVmZTEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNi9mM2M5YWRkMDMyYTEzN2Y2OTNmODJhOGFmM2IzZTMwZi04MDB4NTQwLTkwLndlYnA_p_p100_p_3D.webp",
          h4: "台北自行车展跟踪报道",
          p:
            "当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和..."
        },
         {
          img:
            "https://ccdn.goodq.top/caches/c6f1037431be2e57c07dd414fe5102a6/aHR0cDovLzVjZjY1M2M1MDVmZTEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNi82YTNjMGRhZjdlZTQ0YzE5NmI0NjYyNjY5NmQ2MDgxOC04MDB4NTQwLTkwLndlYnA_p_p100_p_3D.webp",
          h4: "骑行袜，你了解多少？",
          p:
            "当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和..."
        },
         {
          img:
            "https://ccdn.goodq.top/caches/c6f1037431be2e57c07dd414fe5102a6/aHR0cDovLzVjZjY1M2M1MDVmZTEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNi9lZmQ0NWUxY2U5NTZhYmE3MWQ3ZDdmNGU0ZGM1Njc3Yi04MDB4NTQwLTkwLndlYnA_p_p100_p_3D.webp",
          h4: "台北国际自行车展览会",
          p:
            "当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和..."
        },
         {
          img:
            "https://ccdn.goodq.top/caches/c6f1037431be2e57c07dd414fe5102a6/aHR0cDovLzVjZjY1M2M1MDVmZTEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNi81OTg1YTUwMDE0N2M0NWE3M2Y2NTRlZDlkN2Q5ZTkyZi04MDB4NTQwLTkwLndlYnA_p_p100_p_3D.webp",
          h4: "揭秘定制骑行服的常见误区",
          p:
            "当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和..."
        },
         {
          img:
            "https://ccdn.goodq.top/caches/c6f1037431be2e57c07dd414fe5102a6/aHR0cDovLzVjZjY1M2M1MDVmZTEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNi9kYjc0ZmE2MWNjZWI0M2MyYzQxZWVkMzk5MTlmZTVkZS04MDB4NTQwLTkwLndlYnA_p_p100_p_3D.webp",
          h4: "第二届粉丝见面会圆满结束",
          p:
            "当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和..."
        },
         {
          img:
            "https://ccdn.goodq.top/caches/c6f1037431be2e57c07dd414fe5102a6/aHR0cDovLzVjZjY1M2M1MDVmZTEudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOS8wNi8wZjhhMzdjYmE2NjY5M2EzZWM2MjNjMjAxODg0NTE3Mi04MDB4NTQwLTkwLndlYnA_p_p100_p_3D.webp",
          h4: "一辆单车 一段完美的旅途",
          p:
            "当今最领先的响应式自助建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和..."
        },
      ]
    }
  },
   components:{
    l_banner,
    l_event,
  },
}
</script>
<style >
  .border1{
    border-top:1px solid rgba(224,224,224,1);
  }
  .border2{
    border-bottom:1px solid rgba(224,224,224,1);
  }
  .border3{
    border-left:1px solid rgba(224,224,224,1);
  }
  .border4{
    border-right:1px solid rgba(224,224,224,1);
  }
</style>
